<script setup>
import MessageList from './message-list.vue';
import Title from '@/components/title.vue';
import DataOverview from './data-overview.vue';
</script>

<template>
    <div class="page">
        <!-- 顶部模块 -->
        <div class="top">
            <Title title="安防概况"></Title>
            <DataOverview />
        </div>
        <!-- 底部模块 -->
        <div class="bottom">
            <Title title="报警讯息列表"></Title>
            <div class="containter">
                <MessageList></MessageList>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.page {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    height: calc(100% - 50px);
    margin-left: 20px;
    font-size: 20rem;

    .top {

        margin-bottom: 3%;
        flex: 0 0 18%;
        box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);

        .title {
            display: flex;
            margin-bottom: 10px;

            .icon {
                background-image: url(../../../assets/img/titleImg.png);
                background-size: 100% 100%;
                height: 20px;
                width: 20px;
                margin-right: 10px;
            }

            .text {
                color: rgb(81, 91, 231);
            }
        }

    }

    .bottom {
        flex: 0 0 70%;
        box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
        height: 100%;

        .title {
            display: flex;
            margin-bottom: 10px;

            .icon {
                background-image: url(../../../assets/img/titleImg.png);
                background-size: 100% 100%;
                height: 20px;
                width: 20px;
                margin-right: 10px;
            }

            .text {
                color: rgb(81, 91, 231);
                font-size: 16px;
            }
        }

        .containter {
            height: calc(100% - 150px);
        }
    }
}
</style>
